﻿@model CustomerServiceCenter.Models.TicketDetailModel
@{
    ViewBag.Title = "Tickets";
    Layout = "~/views/shared/_layout.cshtml";
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TicketDetails</title>
    <link href="~/content/web/ticketdetail.css?v=20" rel="stylesheet" />


</head>
<body>
    @* Layout-header *@

    <!--条件筛选-->
    <div class="style-bg-green" style="width: 100%;height: 50px;line-height: 50px;">
        <table class="filter-table">
            <tr>
                <td id="goBack">
                    <div><i class="fa fa-angle-left"></i></div>
                    <span>@Model.TicketNo</span>
                </td>
                <td colspan="2">
                    <button id="confirm-btn" class="confirm-btn">Save</button>
                </td>
            </tr>
        </table>
    </div>


    <input type="hidden" id="IsFromWeChat" value="@Model.IsFromWeChat" />
    <input type="hidden" name="ticketId" value="@Model.ID" />
    <div class="container">
        <!--progress bar-->
        <div id="progressBar">
            <span>New <i class="fa fa-check style-green"></i></span>
            <div id="dL1" class="deadline" style="margin-left: 3%;"></div>
            <div class="arrow"></div>

            <span>Solving <i class="fa fa-check style-green"></i></span>
            <div id="dL2" class="deadline" style="margin-left: 23%;"></div>
            <div class="arrow"></div>

            <span>Pending <i class="fa fa-check style-green"></i></span>
            <div id="dL5" class="deadline" style="margin-left: 43%;"></div>
            <div class="arrow"></div>

            <span>Solved <i class="fa fa-check style-green"></i></span>
            <div id="dL3" class="deadline" style="margin-left: 63%;"></div>
            <div class="arrow"></div>

            <span>Closed <i class="fa fa-check style-green"></i></span>
            <div id="dL4" class="deadline" style="margin-left: 83%;"></div>
        </div>


        <!--数据显示-->
        <table class="data-table">
            <tr>
                <td>
                    <label for="">TicketNO</label>
                </td>
                <td>
                    <input type="text" disabled="disabled" value=@Model.TicketNo />
                </td>
                <td>
                    <label for="">State</label>
                </td>
                <td>
                    <select name="state" id="state">
                        <option value="@Model.StateID">@Model.State</option>
                        <option id="state2" value="2">In_Work</option>
                        <option id="state5" value="5">Pending</option>
                        <option id="state3" value="3">Resolved</option>
                    </select>
                </td>

            </tr>
            <tr>
                <td>
                    <label for="">Priority</label>
                </td>
                <td>
                    <select name="Priority" id="Priority">
                        <option value="@Model.PriorityNum">@Model.PriorityNum-@Model.Priority</option>
                        <option id="Priority1" value="1">1-critical</option>
                        <option id="Priority2" value="2">2-high</option>
                        <option id="Priority3" value="3">3-medium</option>
                        <option id="Priority4" value="4">4-low</option>
                    </select>
                </td>
                <td>
                    <label for="">Assin to</label>
                </td>
                <td>
                    <select name="assinger" id="operator">
                        <option value="@Model.AssignerID">@Model.AssignTo</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="">Category</label>
                </td>
                <td>
                    <input type="text" disabled="disabled" id="projectID" value=@Model.Project />
                </td>
                <td>
                    <label for="">Opened by</label>
                <td>
                    <input type="text" disabled="disabled" value=@Model.UserName />
                </td>
            </tr>
            <tr>
                <td>
                    <label for="">Tel</label>
                </td>
                <td>
                    <input type="text" disabled="disabled" value=@Model.TEL />
                </td>
                <td>
                    <label for="">E-mail</label>
                </td>
                <td>
                    <input type="text" disabled="disabled" value=@Model.Email />
                </td>
            </tr>
            @if (Model.IssueType != null)
            {
                <tr>
                    <td>
                        <label for="">Issue Type</label>
                    </td>
                    <td>
                        <select name="IssueType" id="IssueType">
                            <option value="@Model.IssueType">@Model.IssueType</option>
                        </select>
                    </td>
                </tr>
            }
            @if (Model.Data != null)
            {

                foreach (var data in Model.Data)
                {

                    foreach (var inputField in data.InputField)
                    {

                        <tr>
                            <td>
                                <label for="">@inputField.EnglishName</label>
                            </td>
                            <td>
                                <input type="text" disabled="disabled" value=@data.Value />
                            </td>
                        </tr>

                    }
                }
            }

        </table>

        <!--数据显示-->
        <div class="tag">
            <div id="notes" class="tagDiv">Notes</div>
            <div id="governance" class="tagDiv">Governance</div>
        </div>
        <div id="data-div">
            <table id="notesData" class="data-table">
                <tr>
                    <td>
                        <label for="">Description</label>
                    </td>
                    <td>
                        <textarea id="description">@Model.Discription</textarea>
                    </td>
                </tr>
                <tr id="imageTr">
                    <td>
                        <label for="">Attachments</label>
                    </td>
                    <td id="image"></td>
                </tr>
                <tr>
                    <td><label for=''>Comments</label></td>
                    <td>
                        <textarea id='commentsValue' placeholder='please input your comments' style="width: 1032px; height: 44px;"></textarea>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <button class='submitComment' id="submitComment" style="width:120px">Add</button>
                    </td>
                </tr>
                <tr id="commentsTr">
                    <td>
                        <label for="Worknotes">Work notes</label>
                    <td>
                        <div id="comments"></div>
                    </td>
                </tr>
                @* 当ticket处于关闭状态时，才显示评语 *@
                @if (Model.State == "CLOSED")
                {
                    <tr id="serviceCommentsTr">
                        <td>
                            <label for="serviceComments">Service Comments</label>
                        <td>
                            <p id="serviceComments">@Model.ServiceComments</p>
                        </td>
                    </tr>
                }
            </table>
            @* /////////////////////////////////////////////////////// *@
            @* 等待添加数据 *@
            @* ////////////////////////////////////////////////////// *@
            <table id="governanceData" class="data-table" style="display: none;">
                <tr>
                    <td><label for="">Opened by</label></td>
                    <td><input type="text" disabled="disabled" value="@Model.UserName"></td>
                    <td><label for="">Opened</label></td>
                    <td><input type="text" disabled="disabled" value="@Model.Opened"></td>
                </tr>
                <tr>
                    <td><label for="">Resolved by</label></td>
                    <td><input type="text" disabled="disabled" value="@Model.ResolvedBy"></td>
                    <td><label for="">Resolved time</label></td>
                    <td><input type="text" disabled="disabled" value="@Model.ResolvedTime"></td>
                </tr>
                <tr>
                    <td><label for="">Closed by</label></td>
                    <td><input type="text" disabled="disabled" value="@Model.ClosedBy"></td>
                    <td><label for="">Closed time</label></td>
                    <td><input type="text" disabled="disabled" value="@Model.ClosedTime"></td>
                </tr>
            </table>
        </div>
    </div>


    <!--Comments弹出层-->
    <div class="output"></div>
    <!--遮罩层-->
    <div class="hide"></div>

    <script type="text/javascript">
    $(function () {
        /*添加header标记*/
        var flag = "<i class='fa fa-angle-down style-green'></i>"
        $("#Tickets").append(flag);

                    page.$Init();
                });

    var page = {
        $Init: function () {
            /*request时不可编辑状态*/
            page.$setReadOnly();

                /*显示页面样式*/
                page.$show();

                /*获取operator、comments及图片数据*/
                page.$showData();

                /*修改ticket信息*/
                page.$confirm();

                /*返回上一页*/
                page.$goBack();

                page.$submitComment();

            },

        //显示弹出层
        $showOutput: function () {
                var h = $(document).height();       //获取内容高度
            $(".hide").css({ display: "block", height: h + "px" });
            $(".output").css("display", "block");
            $("#closeOutput").click(function () {
                    page.$closeOutput();
                });
            },

        /*关闭弹出层*/
        $closeOutput: function () {
            $(".hide").css("display", "none");
            $(".output").css("display", "none");
            },

        //request状态时，页面不可编辑,comments和图片不显示
        $setReadOnly: function () {
                if ($("#IsFromWeChat").val() == 2) {
                $("#state").html("<option value='@Model.StateID'>@Model.State</option>");
                $("#state").attr("disabled", "disabled");
                $("#operator").attr("disabled", "disabled");
                $("#IssueType").attr("disabled", "disabled");
                $("#description").attr("disabled", "disabled");
                $("#confirm-btn").css("display", "none");
                $("#commentsTr").remove();
                $("#imageTr").remove();
                }
            },

        /*显示页面样式*/
        $show: function () {
                var stateID = $("#state").val(), $selectVal = $("#state" + stateID), $deadLine = $("#dL" + stateID);

            $selectVal.remove();
            $deadLine.addClass("style-bg-green");                      //当前状态显示下划线
            $deadLine.prev("span").css("color", "initial");
            $deadLine.prevAll("span").find(".fa-check").css("display", "inline-block");       //之前状态显示√
            $deadLine.prev("span").find(".fa-check").css("display", "none");
            $("#notes").addClass("tagShadow");

            //点击tag转换显示数据及样式
            $(".tagDiv").click(function () {
                $("#data-div table").css("display", "none");
                $(".tagDiv").removeClass("tagShadow");
                $(this).addClass("tagShadow");
                    var tagID = $(this).attr("id");
                    if (tagID != "notes") {
                    $("#governanceData").css("display", "table");
                    } else {
                    $("#notesData").css("display", "table");
                    }

                })
        },

        /*获取operator、comments及图片数据*/
        $showData: function () {
                var assignerID = @Model.AssignerID
            ticketId = @Model.ID
            applicationID = @Model.ApplicationID
            isFromWeChat  = @Model.IsFromWeChat

            /*获取operator数据*/
            $.ajax({
                    url: "/api/Tickets/GetOperatorInfo",
                data: { 'ticketId': ticketId, 'isFromWeChat': isFromWeChat },
                dataType: "json",
                success: function (data) {
                        var operator ="";
                    $.each(data, function (i, item) {
                            if (assignerID != item.ID) {
                            operator += "<option value = " + item.ID + ">" + item.Name + "</option>";
                            }
                        });
                    $("#operator").append(operator);
                    }
                });

            /*获取comments数据*/
            $.ajax({
                    url: "/api/Tickets/GetCommentsHistory",
                data: { 'ticketId': ticketId },
                dataType: "json",
                success: function (data) {
                        var comments = "";
                        if (data != null) {
                        $.each(data, function (i, item) {
                                comments += "<div class='commentsData'><label for=''>" + item.ActorName + "</label><p>" + item.Comments + "</p></div>";
                            });
                        }
                    $("#comments").html(comments);
                    }
                });

            /*获取图片数据*/
            $.ajax({
                    url: "/api/Tickets/GetImageInfo",
                data: { 'ticketId': ticketId },
                dataType: "json",
                success: function (data) {
                        var imgs = "";
                    $.each(data, function (i, item) {
                            imgs += "<img src=" + item.Path + "></img>";
                        });
                    $("#image").append(imgs);
                        page.$showImg();
                    }
                });

                //获取project的IssueType信息
             var IssueTypeVal = "";
            $.ajax({
                    url: "/api/Settings/GetIssueTypeInfos",
                data: { 'ProjectID': applicationID },
                dataType: "json",
                success: function (info) {
                    $.each(info, function (j, item) {
                            if (item.IssueTypeDescription != $("#IssueType").val()) {
                                IssueTypeVal += "<option value = " + item.ID + ">" + item.IssueTypeDescription + "</option>";
                            }
                        });
                    $("#IssueType").append(IssueTypeVal);
                    }
                });

            },

        /*返回上一页*/
        $goBack: function () {
            $("#goBack").click(function () {
                    history.back(-1);       //返回上一页，数据刷新。go(-1)不刷新
                })
        },

        /*点击图片放大查看*/
        $showImg: function () {
            $("img").click(function () {
                    var imgSrc = $(this).attr("src");
                $(".output").html("<i id='closeOutput' class='fa fa-remove'></i><img id='bigImg' src=" + imgSrc + "></img>");
                    var realH, realW, percent, imgH, imgW, windowH, windowW, imgTop, imgLeft, $img = $("#bigImg");
                    page.$showOutput();
                //图片加载出来以后，获取本身宽高
                $img.on("load", function () {
                        realW = $img.width();
                        realH = $img.height();
                        windowW = $(window).width();
                        windowH = $(window).height();
                        percent = realH / realW;
                        //按图片宽高比来确定图片显示大小
                        if (percent >= 0.8) {
                            imgH = windowH * 0.8;
                            imgW = imgH / percent;
                        } else {
                            imgW = windowW * 0.6;
                            imgH = imgW * percent;
                        }
                        //计算图片居中位置
                        imgTop = (windowH - imgH) / 2;
                        imgLeft = (windowW - imgW) / 2;
                    //alert(imgH);
                    $img.css({ width: imgW + "px", height: imgH + "px", });
                    $(".output").css({ "top": imgTop + "px", "left": imgLeft + "px", "text-align": "center", "width": "initial" });
                    });
                });
            },

        /*修改ticket信息*/
        $confirm: function () {
            $("#confirm-btn").click(function () {
                    var stateVal, solution = $("#solutionValue").val();
                    //获取state的值
                    stateVal = $("#state").val();
                    switch (stateVal) {
                        case "2":               //状态改为solving时，assign to不能为空
                            if ($("#operator").val() != 0) {
                                page.$submitConfirm(solution, stateVal);
                            } else {
                                alert("Assigner can't be empty!");
                            }
                            break;
                        case "3":                //状态改为solved时，才输入comments
                            if ($("#operator").val() != 0) {
                                var solutionHtml = "<i id='closeOutput' class='fa fa-remove'></i><div class='solution'><label for=''>solution</label><hr />"
                                    + "<textarea id='solutionValue' placeholder='please input your solution'></textarea></div>"
                                    + "<button class='solution-cancel'>Cancel</button><button class='solution-submit'>Confirm</button>"
                            $(".output").html(solutionHtml);
                                page.$showOutput();

                            /*提交评价*/
                            $(".solution-submit").click(function () {
                                    solutionVal = $("#solutionValue").val();
                                    if (solutionVal == "") {
                                        alert("solution can't be empty!");
                                    } else {
                                        page.$submitConfirm(solutionVal, stateVal);
                                    }
                                });

                            /*取消评价*/
                            $(".solution-cancel").click(function () {
                                    page.$closeOutput();      /*关闭弹出层*/
                                });
                            } else {
                                alert("Assigner can't be empty!");
                            }
                            break;
                        default:
                            page.$submitConfirm(solution, stateVal);       //提交修改
                            break;

                    }

                });
            },

        /*将修改后的ticket信息提交后台*/
        $submitConfirm: function (solutionVal, stateVal) {
                var ticketId = @Model.ID
            page.$closeOutput();      /*关闭弹出层*/
            //alert(stateVal);
            //alert($("#IsFromWeChat").val());
            //alert("-------"+$("#Priority").val());
            $.ajax({
                    url: "/api/Tickets/AssignOrModifyStatus",
                data: { 'TicketID': ticketId, 'Assigner': $("#operator").val(), 'Status': stateVal, 'Solution': solutionVal, 'IsFromWeChat': $("#IsFromWeChat").val(), 'Description': $("#description").val(), 'IssueType': $("#IssueType").val(), 'PriorityNum': $("#Priority").val() },
                type: "post",
                dataType: "json",
                success: function (data) {
                        if (data == "success") {
                            location.href = "../Tickets/TicketsRequestInfo";
                        } else {
                            alert(data);
                        }
                    }
                });


            },


        $submitComment: function () {
            $("#submitComment").click(function () {
                    var ticketId = @Model.ID
                    isFromWeChat  = @Model.IsFromWeChat
                    stateVal = $("#state").val()
                    commentsVal = $("#commentsValue").val()
                    $.ajax({
                        url: "/api/Tickets/AddCommnets",
                        data: { 'commentsVal': commentsVal, 'ticketID': ticketId, 'status': stateVal, 'isFromWeChat': isFromWeChat},
                        type: "Get",
                        dataType: "json",
                        success: function (data) {
                            if (data == null) {
                                page.$showData();
                            } else {
                                alert(data);
                            }
                        }
                    });
                });
            }

    }

    </script>
</body>
</html>
